<template>
  <div>
    <el-dialog title="场景变量" :visible.sync="dialogVisble" :before-close="handleClose"
               :close-on-click-modal=false :fullscreen="false" width="1000px">
      <div>
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
          <div class="search">
            <el-form-item label="变量名称" prop="name">
              <el-input v-model.trim="queryParams.name" placeholder="请输入变量名称搜索" maxlength="50" clearable/>
            </el-form-item>
            <el-form-item label="变量的值" prop="value">
              <el-input v-model.trim="queryParams.value" placeholder="请输入用例描述搜索" maxlength="200" clearable/>
            </el-form-item>
            <el-form-item label="是否全局" prop="isGlobal">
              <el-select v-model="queryParams.isGlobal" placeholder="请选择" clearable>
                <el-option v-for="dict in statusList" :key="dict.value" :label="dict.text"
                           :value="dict.value"/>
              </el-select>
            </el-form-item>
          </div>
          <div class="search">
            <el-button type="primary" @click="restList(query.keywords)" icon="el-icon-search">查询</el-button>
            <el-button @click="refresh('queryForm')" icon="el-icon-refresh">重置</el-button>
          </div>
        </el-form>
        <div class="create-btn">
          <el-button type="primary" icon="el-icon-plus" @click="add" v-permission="'scene_variable:add'">新建变量</el-button>
        </div>
        <el-table :data="tableData" element-loading-spinner="el-icon-loading" element-loading-text="加载中。。。"
                  element-loading-custom-class="equipment-loading" element-loading-background="rgba(55,55,55,0.2)"
                  max-height="290">
          <el-table-column type="index" label="序号" width="100px" :index="indexMethod"></el-table-column>
          <el-table-column prop="name" label="变量名称" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-input type="text" v-model="scope.row.name" v-show="scope.row.isEditor"/>
              <span v-show="!scope.row.isEditor">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="value" label="变量的值" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-input type="text" v-model="scope.row.value" v-show="scope.row.isEditor"/>
              <span v-show="!scope.row.isEditor">{{ scope.row.value }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="isGlobal" label="是否全局" show-overflow-tooltip width="150">
            <template slot-scope="scope">
              <el-switch
                :disabled="!scope.row.isEditor"
                v-model="scope.row.isGlobal"
              ></el-switch>
              <!--              <el-input type="text" v-model="scope.row.isGlobal" v-show="scope.row.isEditor"/>-->
              <!--              <span v-show="!scope.row.isEditor">{{ scope.row.isGlobal }}</span>-->
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template v-slot="scope">
              <el-button type="text" @click="scope.row.isEditor = true;" v-if="!scope.row.isEditor" v-permission="'scene_variable:update'">编辑</el-button>
              <el-button type="text" @click="save(scope.row, scope)" v-if="scope.row.isEditor">保存</el-button>
              <el-button type="text" @click="deleteVariable (scope.row)" v-if="scope.row.id" v-permission="'scene_variable:delete'">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="option-tip"> 说明：字符串类型的变量，引用的方式为${变量名}；定义为全局的变量后，则在当前项目任何用例下都能使用。当前项目下变量名不能重名。</div>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="query.pageNum"
          :limit.sync="query.pageRow"
          layout="total, prev, pager, next"
          @pagination="getSceneVariableList"
        />
      </div>

    </el-dialog>
  </div>

</template>

<script>
import Pagination from "@/components/Pagination/index";

export default {
  name: "variableDialog",
  components: {Pagination},
  props: {
    dialogVisble: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      queryParams: {
        name: "",
        value: "",
        isGlobal: ""
      },
      statusList: [
        {
          text: "是",
          value: 1
        },
        {
          text: "否",
          value: 0
        },
      ],
      treeNodes: [],
      tableData: [],
      total: 0,
      query: {
        keywords: "",
        pageRow: 10,
        pageNum: 1
      },
    }
  },
  mounted() {
    this.getSceneVariableList();
  },
  methods: {
    restList() {
      this.query.pageNum = 1;
      this.getSceneVariableList();
    },
    refresh(queryForm) {
      this.$refs[queryForm].resetFields();
      this.getSceneVariableList();
    },
    indexMethod(index) {
      return index + 1;
    },
    handleClose() {
      this.$emit("closeDialog");
    },
    getSceneVariableList() {
      this.query = {...this.query, ...this.queryParams}
      this.query["projectId"] = sessionStorage.getItem("projectId")
      this.query["caseId"] = sessionStorage.getItem("caseId")
      this.api({
        url: "/getSceneVariableList",
        method: "post",
        data: this.query
      }).then(resp => {
        this.tableData = resp.list;
        this.total = resp.totalCount;
      });
    },
    save(row, index) {
      if (row.value && row.name) {
        row.isEditor = false;
        if (row.id) {
          this.api({url: "/updateSceneVariable", method: "put", data: row}).then(resp => {
            if(resp.code !== "500"){
              this.$message({message: resp, type: 'success'});
            }
            this.getSceneVariableList();
          })
        } else {
          this.api({url: "/addSceneVariable", method: "post", data: row}).then(resp => {
            if(resp.code !== "500"){
              this.$message({message: resp, type: 'success'});
            }
            this.getSceneVariableList();
          })
        }
      } else {
        this.$message.warning({message: "变量名或值不能为空"});

      }
    },
    deleteVariable(row) {
      this.api({url: "/deleteSceneVariable/" + row.id, method: "delete"}).then(resp => {
        this.$message({message: resp, type: 'success'});
        this.getSceneVariableList();
      })
    },
    add() {
      this.tableData.unshift(
        {
          name: "",
          value: "",
          isGlobal: 0,
          isEditor: true,
          caseId: sessionStorage.getItem("caseId"),
          projectId: sessionStorage.getItem("projectId")
        }
      )
    }
  }
}
</script>

<style scoped lang="scss">
.search {
  margin: auto;
  text-align: center;
}

.create-btn {
  margin: 10px 0 10px 0;
}

.option-tip {
  color: #909399;
  margin-top: 10px;
}
</style>
